<template>
  <el-dialog
    :before-close="commit_click_close"
    title="提示"
    v-model="open_in"
    width="30%"
  >
    <span>{{ props.text }}</span>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="commit_click_close" size="mini">取 消</el-button>
        <el-button type="primary" @click="commit_click" size="mini"
          >确 定</el-button
        >
      </span>
    </template>
  </el-dialog>
</template>

<script>
import { ref, watch } from "vue";

export default {
  name: "confirmation_box",
  props: {
    text: String,
    in_value: Boolean,
  },
  setup(props, { emit }) {
    let open_in = ref(props.in_value);

    watch(props, (newVal) => {
      open_in.value = newVal.in_value;
    });

    const commit_click_close = () => {
      open_in.value = false;
      emit("childClick", false);
    };

    const commit_click = () => {
      emit("childClick", true);
    };

    return {
      commit_click,
      props,
      open_in,
      commit_click_close,
    };
  },
};
</script>

<style scoped></style>
